<template>
    <div id="wrap">
			<div id="top_content">
					<div id="header">
						<div id="rightheader">
							<p>
								2009/11/20
								<br />
							</p>
						</div>
						<div id="topheader">
							<h1 id="title">
								<a href="#">Main</a>
							</h1>
						</div>
						<div id="navigation">
						</div>
					</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						添加员工:
					</h1>
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">
									姓名:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="name" v-model="name" placeholder="请在这里输入用户名"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									头像:
								</td>
								<td valign="middle" align="left">
									<input type="file" name="photo"  ref="phone"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									工资:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="salary" v-model="salary" placeholder="请输入工资"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									年龄:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="age" v-model="age" placeholder="请谁年龄"/>
								</td>
							</tr>
						</table>
						<p>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<!--							<input type="submit" class="button" value=" 提交 " @click="add_submit"/>-->
                            <el-button  :plain="true" type="success" round ><input type="submit" class="button" value=" 提交 " @click="add_submit"/></el-button>
						</p>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					ABC@126.com
				</div>
			</div>
		</div>
</template>

<script>
    export default {
        name: "addemp",
        data(){
            return{
                name:"",
                phone:"",
                salary:"",
                age:"",

            }
        },
        methods:{
            //提交数据,校验数据不为空,否则提交失败
            add_submit(){
                //获取图片信息
                console.log("获取图片信息")
                // console.log(this.$refs.phone.files[0])
                let phone=this.$refs.phone.files[0]
                // ajax文件上传请求方式必须是post enctype必须是 multipart/formData
                // 而ajax上传文件需要借助于 formData
                let formData=new FormData();
                formData.append("e_name", this.name);
                formData.append("photo", phone);
                formData.append("salary", this.salary);
                formData.append("age", this.age);
                console.log(formData);
                this.$axios({
                    url:"http://127.0.0.1:8000/api/addlist/",
                    method:"post",
                    data:formData,
                    headers:{
                        'content-type': 'multipart/form-data'
                    },
                }).then(res=>{
                    //成功之后返回主页面,展示全部信息
                    console.log(res.data)
                    console.log('添加成功');
                    this.$message({
                      message: '恭喜你，添加成功',
                      type: 'success'
                    });
                    this.$router.push("/emplist")
                }).catch(error=>{
                    console.log(error);
                    // alert('添加字段不能为空')
                     this.$message.error('添加字段不能为空');
                })
            }

        }

    }
</script>

<style scoped>

</style>
